<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/axios.js"></script>
    <script src="js/vue.js"></script>
</head>

<body>
    <div id="app">
        <a href="index.html">返回首页</a>

        <table border="1">
            <tr>
                <td>编号</td>
                <td>名称</td>
            </tr>
            <tr v-for="(category,index) in classesList">
                <td>{{category.id}}</td>
                <td>{{category.name}}</td>

            </tr>
        </table>
    </div>
</body>

</html>
<script>
    new Vue({
        el: "#app",
        data: {
            classesList: []
        },
        methods: {
            selectAllClasses() {
                //ajax查询
                var url = "http://localhost:8080/brand"
                axios.get(url)
                    .then(res => {
                        //成功
                        //获得查询结果
                        var baseResult = res.data
                        if (baseResult.code == 1) {
                            //成功
                            this.classesList = baseResult.data
                        } else {
                            //失败
                            alert(baseResult.message)
                        }
                    })
                    .catch(err => {
                        console.error(err);
                    })
            },
            deleteClasses(id) {
                if (!confirm("您确定要删除么？")) {
                    return
                }
                // 删除
                var url = `http://localhost:8080/category/${id}`;
                axios.delete(url)
                    .then(response => {
                        if (response.data.code == 1) {
                            // 成功提示
                            alert(response.data.message)
                            // 跳转
                            location.href = "category_list.html"
                        } else {
                            alert(response.data.message)
                        }
                    })
                    .catch(error => {
                        alert(error)
                    })
            }
        },
        created() {
            //查询所有
            this.selectAllClasses()
        }
    })
</script>